<template>
	<view class="wrap">
		<view class="card_body">
			<view class="card_cell">
				<view class="card_title">
					<text class="must">*</text>
					抬头名称
				</view>
				<view class="card_inp">
					<input class="inpbox" v-model="params.Company" type="text" placeholder="请输入抬头名称" />
				</view>
			</view>
			<picker mode="selector" :range="InvoiceTypeEntry" @change="changeInvoiceTypeFun">
				<view class="card_cell">
					<view class="card_title">
						<text class="must">*</text>
						发票类型
					</view>
					<view class="card_inp">
						<input class="inpbox" v-model="params.InvoiceType" type="text" disabled placeholder="请选择发票类型" />
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17453073622021044.png"
							mode="heightFix"></image>
					</view>
				</view>
			</picker>
			<picker mode="selector" :range="InvoiceContentEntry" @change="changeInvoiceContentFun">
				<view class="card_cell">
					<view class="card_title">
						<text class="must">*</text>
						发票内容
					</view>
					<view class="card_inp">
						<input class="inpbox" v-model="params.InvoiceContent" type="text" disabled
							placeholder="请选择发票内容" />
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17453073622021044.png"
							mode="heightFix"></image>
					</view>
				</view>
			</picker>
			<picker mode="selector" :range="BillTypeEntry" @change="changeBillTypeFun"
				v-if="params.InvoiceType == '普通发票'">
				<view class="card_cell">
					<view class="card_title">
						<text class="must">*</text>
						抬头类型
					</view>
					<view class="card_inp">
						<input class="inpbox" v-model="params.BillType" type="text" disabled placeholder="请选择抬头类型" />
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17453073622021044.png"
							mode="heightFix"></image>
					</view>
				</view>
			</picker>
			<view class="card_cell" v-else>
				<view class="card_title">
					<text class="must">*</text>
					抬头类型
				</view>
				<view class="card_inp">
					<input class="inpbox" value="企业" disabled type="text" placeholder="请输入收票邮箱" />
				</view>
			</view>
			<view class="card_cell">
				<view class="card_title">
					<text class="must">*</text>
					收票邮箱
				</view>
				<view class="card_inp">
					<input class="inpbox" v-model="params.Email" type="text" placeholder="请输入收票邮箱" />
				</view>
			</view>

			<view class="card_cell" v-if="params.BillType == '企业'">
				<view class="card_title">
					<text class="must">*</text>
					税号
				</view>
				<view class="card_inp">
					<input class="inpbox" v-model="params.TFN" type="text" placeholder="请输入税号" />
				</view>
			</view>
			<block v-if="params.InvoiceType == '专用发票'">
				<view class="card_cell">
					<view class="card_title">
						<text class="must">*</text>
						电话号码
					</view>
					<view class="card_inp">
						<input class="inpbox" v-model="params.Mobile" type="tel" placeholder="请输入电话号码(选填)" />
					</view>
				</view>
				<view class="card_cell">
					<view class="card_title">
						<text class="must">*</text>
						开户银行
					</view>
					<view class="card_inp">
						<input class="inpbox" v-model="params.Bank" type="text" placeholder="开户银行" />
					</view>
				</view>
				<view class="card_cell">
					<view class="card_title">
						<text class="must">*</text>
						银行账户
					</view>
					<view class="card_inp">
						<input class="inpbox" v-model="params.BankAccount" type="tel" placeholder="银行账户" />
					</view>
				</view>
			</block>

		</view>

		<view class="card_body" v-if="params.BillType == '企业'">
			<view class="title_body">
				单位地址
			</view>
			<picker mode="region" :value="['广东省', '广州', '天河']" @change="chooseAddressInfo">
				<view class="card_cell">
					<view class="card_title">

						所在地区
					</view>
					<view class="card_inp">
						<input class="inpbox" :style="addressinfo == '请选择地区' ? 'color: #a8a8a8;' : ''"
							v-model="addressinfo" type="text" disabled placeholder="请选择所在地区" />
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17453073622021044.png"
							mode="heightFix"></image>
					</view>
				</view>
			</picker>
			<view class="card_cell card_textarea">
				<view class="card_title">

					详细地址
				</view>
				<view class="card_inp">
					<textarea type="text" v-model="params.Address" disable-default-padding maxlength="50"
						placeholder="请输入详细地址" />

				</view>
			</view>
		</view>

		<view style="height: 160rpx;"></view>
		<view class="saveBox">
			<view class="btn deleBtn" @click="deleInfo" v-if="mold == 1">删除</view>
			<view class="btn saveBtn" @click="submit">{{ mold == 0 ? '添加' : mold == 1 ? '保存' : '' }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			region: [],
			mold: 0,
			params: {
				Company: '',// 企业名称
				TFN: '',// 税号
				Mobile: '',// 联系电话
				Province: '',// 省份
				City: '',// 城市
				Area: '',// 区域
				Address: '',// 详细地址
				Bank: '',// 开户银行
				BankAccount: '',// 银行账号
				InvoiceType: '普通发票',// 发票类型
				InvoiceContent: '商品明细',// 发票内容
				BillType: '个人',
			},
			InvoiceTypeEntry: ['普通发票', '专用发票'],
			InvoiceContentEntry: ['商品明细', '商品类别'],
			BillTypeEntry: ['个人', '企业'],
			invoiceId: 0,
		};
	},
	onLoad(e) {
		this.mold = e.mold
		this.invoiceId = e?.id || 0
		uni.setNavigationBarTitle({
			title: this.mold == 0 ? '添加发票抬头' : this.mold == 1 ? '编辑发票抬头' : ''
		})
		if (this.mold == 1) {
			this.getEditInfo()
		}
	},
	computed: {
		addressinfo() {
			let list = this.region;
			if (list[0] == list[1]) {
				list.splice(0, 1)
			}
			return list.join('') || '请选择地区';
		},
	},
	methods: {
		async getEditInfo() {
			let res = await this.$api.post('/Invoice/Detail', { ID: this.invoiceId })
			this.params = res.data || false
			if (this.params) {
				this.region = [
					this.params.Province || '',
					this.params.City || '',
					this.params.Area || '',
				]
			}
		},
		chooseAddressInfo(e) {
			console.log('picker发送选择改变，携带值为', e)
			this.region = e.detail.value;
			if (this.region.length) {
				this.params.Province = this.region[0]
				this.params.City = this.region[1] || ''
				this.params.Area = this.region[2] || ''
			}

		},
		changeInvoiceTypeFun(e) {
			console.log(e.detail.value);
			this.params.InvoiceType = this.InvoiceTypeEntry[e.detail.value]
			if (this.InvoiceTypeEntry[e.detail.value] == '专用发票') {
				this.params.BillType = '企业'
			}
		},
		changeInvoiceContentFun(e) {
			console.log(e.detail.value);
			this.params.InvoiceContent = this.InvoiceContentEntry[e.detail.value]
		},
		changeBillTypeFun(e) {
			console.log(e.detail.value);
			this.params.BillType = this.BillTypeEntry[e.detail.value]
		},
		async submit() {
			if (!this.params.Company) {
				this.$pv.msg('请输入抬头')
				return
			}
			if (!this.params.Email) {
				this.$pv.msg('请输入收票邮箱')
				return
			}
			if (this.params.BillType == '企业') {
				if (!this.params.TFN) {
					this.$pv.msg('请输入税号')
					return
				}
			}
			if (this.params.BillType == '专用发票') {
				
				if (!this.params.Mobile) {
					this.$pv.msg('请输入联系电话')
					return
				}
				if (!this.params.Bank) {
					this.$pv.msg('请输入开户银行')
					return
				}
				if (!this.params.BankAccount) {
					this.$pv.msg('请输入银行账号')
					return
				}
				if (!this.params.Province) {
					this.$pv.msg('请选择所在地区')
					return
				}
				if (!this.params.Address) {
					this.$pv.msg('请输入详细地址')
					return
				}
			}


			let url;
			if (this.mold == 0) {
				url = '/Invoice/AddCompany'
			} else if (this.mold == 1) {
				url = '/Invoice/EditCompany'
			}
			let res = await this.$api.post(url, this.params)
			if (res.code == 0) {
				if (this.mold == 0) {
					this.$pv.msg('添加完成')
				}
				if (this.mold == 1) {
					this.$pv.msg('保存完成')
				}
				setTimeout(() => {
					uni.navigateBack()
				}, 700)
			} else {
				this.$pv.msg(res.message)
			}
		},
		async deleInfo() {
			uni.showModal({
				title: '温馨提示',
				content: '您确定要删除该发票抬头吗',
				cancelText: '取消',
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						let suc = await this.$api.post('/Invoice/DeleteCompany', {
							id: this.invoiceId
						})
						if (suc.code == 0) {
							this.$pv.msg('删除成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 700)
						} else {
							this.$pv.msg(res.message)
						}
					} else if (res.cancel) {
					}
				},
			})

		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.wrap {
	.card_body {
		margin-bottom: 20rpx;

		.title_body {
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
			margin: 0 0 8rpx 24rpx;
		}

		.card_cell {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 110rpx;
			padding: 0 24rpx;
			border-bottom: 1rpx solid #E4E4E4;

			.card_title {
				font-size: 32rpx;
				color: #333333;
				width: max-content;
				min-width: max-content;

				.must {
					color: #fc3c4a;
				}
			}

			.card_inp {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;

				.inpbox {
					flex: 1;
					margin-left: 24rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				input {
					display: block !important;
					text-align: right;
				}

				image {
					margin-left: 8rpx;
					width: 20rpx;
					height: 30rpx;
				}
			}

		}

		.card_textarea {
			padding: 24rpx;
			height: 170rpx;

			.card_title {
				justify-content: flex-start;
				height: 100%;
			}

			.card_inp {
				textarea {
					width: 100%;
					min-height: 120rpx;
					height: 120rpx;
					padding: 0;
					font-size: 32rpx;
					color: #000;
					flex: 1;
					margin-left: 20rpx;
					box-sizing: border-box;
					text-align: right;
				}
			}

		}
	}

	.saveBox {
		position: fixed;
		width: 100%;
		height: 158rpx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		padding: 20rpx 50rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;

		.saveBtn {
			width: 670rpx;
			height: 88rpx;
			background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.deleBtn {
			width: 670rpx;
			height: 88rpx;
			margin-right: 10rpx;
			background: #999;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: 500;
		}
	}
}
</style>
